<template>
	<div class="ivu-box">
		<Breadcrumb>
			<BreadcrumbItem>系统设置</BreadcrumbItem>
			<BreadcrumbItem>权限设置</BreadcrumbItem>
		</Breadcrumb>

		<Button style="margin-bottom:20px;margin-top: 24px;" v-hasPermission="['2']" class="button" size="small" type="primary" @click="changeUserMsg('',2)">添加角色身份</Button>
		<Button style="margin-bottom:20px;margin-top: 24px;visibility: hidden;">添加</Button>
		<!-- <Button style="margin-bottom:20px;margin-top: 24px;" class="button" size="small" type="primary" @click="$router.push('/system/allpower')">添加权限身份</Button> -->
		<div class="form_box">
			<Table ref="selection" :columns="columns1" :data="tableData" :loading="loading">
				<!-- 用户状态/备注 -->
				<template slot-scope="{ row }" slot="status">
					<span  class="success" v-if="row.status==='1'">启用中</span >
					<span class="error" v-if="row.status==='2'">已被禁用</span >
				</template>
				<!-- 用户状态/备注 -->

				<template slot-scope="{ row }" slot="do">
					<Button  class="button" size="small" v-hasPermission="['3']"  type="info" @click="changeUserMsg(row,1)">编辑</Button>
					<Button class="button" size="small"  v-hasPermission="['4']" type="error" @click="delItem(row)">删除</Button>
					<Button class="button" size="small"  v-hasPermission="['3']" :type="row.status == 2?'success':'error' " @click="stopOrBegin(row)">
						<span v-if="row.status == 1">禁用</span>
						<span v-else>启用</span>
					</Button>
					<Button  class="button" size="small"  v-hasPermission="['33']" type="info" @click="gotoAllpower(row)">权限管理</Button>
				</template>
			</Table>
		</div>


		<Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
		 @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
		<!-- 修改,添加用户模态框 -->
		<Modal v-model="addUserOrChange" :mask-closable="false" :footer-hide="true" :title="title">
			<Form ref="addformInline" :label-width="200" :model="addformInline" inline>
				<FormItem label="身份名称">
					<Input v-model="addformInline.title" placeholder="请输入身份名称" style="width: 200px" />
				</FormItem>
				<FormItem label="备注">
					<Input type="textarea" :rows="3" v-model="addformInline.remarks" placeholder="请输入备注"
						style="width: 200px" />
				</FormItem>
			</Form>
			<div class="addBalanceFooter">
				<Button class="cancelAddBalance" @click="cancelAddBalance">取消</Button>
				<Button type="primary" @click="addBalanceOk">提交</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user_id:JSON.parse(this.astgo.getItem(this.Pn + "info2")).role_id,
				type: "",
				title: "",
				request:{
					page:1
				},
				addUserOrChange: false, //模态框
				columns1: [{
						title: "权限身份",
						key: "title",
						minWidth: 120,
						align: "center",

					},
					{
						title: "添加时间",
						key: "create_time",
						align: "center",
						minWidth: 180
					},

					{
						title: "状态",
						slot: "status",
						align: "center",
						minWidth: 150
					},
					{
						title: "备注",
						key: "remarks",
						align: "center",
						minWidth: 150
					},
					{
						title: "操作",
						slot: "do",
						align: "center",
						minWidth: 300
					}
				],
				tableData: [],
				addformInline: {
					title: "",
					status: "1",
					remarks: ""
				},
				checkAllGroup: [],
				page: {},
			};
		},
		created() {
			this.getlist();

			// console.log()

		},
		methods: {

			handleSizeChange(val) {
				this.request.page = 1;
				this.request.limit = val;
				this.lists();
			},
			handleCurrentChange(val) {
				this.request.page = val;
				this.lists();
			},


			//去权限分配页面
			gotoAllpower(row) {
				this.$router.push({
					path: "/system/allpower",
					query: {
						id: row.id,
						name: row.title
					}
				});
			},
			//获取信息 角色列表
			getlist() {
				this.loading = true;
				this.axios.post("role/role/roleList",this.request).then(res => {
					if (res.code == 1) {
						this.loading = false;
						this.tableData = res.data.list;
						this.page.count = res.data.count; // 总条数
						this.page.curPage = res.data.curPage; // 当前页
						this.page.countPage = res.data.countPage; // 总页数
					}
				});
			},
			//添加或者修改
			changeUserMsg(item, type) {
				console.log("现在的type", type);
				this.type = type;
				if (type == 1) {
					this.title = "编辑";
					this.addformInline.title = item.title;
					this.addformInline.remarks = item.remarks;
					this.addformInline.id = item.id;
					this.addUserOrChange = true;

				} else if (type == 2) {

					if (this.addformInline.id) {
						this.addformInline.id =null;
					}

					this.title = "添加";
					this.$Modal.confirm({
						title: "确定要添加角色？",
						onOk: () => {
							this.addUserOrChange = true;
						},
						onCancel: () => {}
					});
				}
			},
			//删除角色信息
			delItem(row) {
				this.$Modal.confirm({
					title: `提示`,
					content: '确定删除角色:“' + row.title + '”吗？',
					onOk: () => {
						this.axios.post('role/roleDel',{id:row.id}).then(res => {
							if(res.code == 1){
								this.$Message.success("删除成功");
								this.getlist();
							}
						})

					},
					onCancel: () => {}
				});
			},
			// 添加角色/修改
			addBalanceOk() {
				var url = this.type == 1?'role/roleEdit':'role/roleAdd';
				this.axios.post(url,this.addformInline).then(res => {
					if(res.code == 1){
						this.getlist();
						this.clearinput();
						this.$Message.success(`操作成功`);
					}
				})
			},
			cancelAddBalance() {
				this.addUserOrChange = false;
				console.log("关闭弹框");
			},
			//停止或者启用
			stopOrBegin(row) {

				var type = row.status;

				this.$Modal.confirm({
					title: `提示`,
					content: "确定要" + (type == 2 ? "启用" : "禁用") + "角色:“" + row.title + "”吗？",
					onOk: () => {
						this.axios.post("role/roleStatus",{id:row.id,status:type ==1?2:1}).then(res => {
							if (res.code == 1) {
								this.$Message.success("操作成功");
								this.getlist();
							}
						});

					},
					onCancel: () => {}
				});
			},
			//清空输入框
			clearinput() {
				this.addUserOrChange = false;
				this.addformInline.title = "";
				this.addformInline.remarks = "";
			}
		}
	};
</script>

<style scoped>
	.button {
		margin-right: 3px;
	}

	.addBalanceFooter {
		display: flex;
		justify-content: center;
	}

	.cancelAddBalance {
		margin-right: 40px;
	}

	/* 谷歌 */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		appearance: none;
		margin: 0;
	}

	/* 火狐 */
	input {
		-moz-appearance: textfield;
	}
</style>
